<!--组件：生成信息-->
<!--created by lx 2023/6/13-->
<template>
  <div>
    <a-form ref="formRef" :model="generateForm" :rules="rules">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="生成模板" field="templateType">
            <a-select
              v-model="generateForm.templateType"
              :options="[{ label: '单表', value: 1 }]"
              placeholder="请选择生成模板"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="前端类型" field="frontType">
            <a-select
              v-model="generateForm.frontType"
              :options="[{ label: 'Vue3 yiyan模板', value: 10 }]"
              placeholder="请选择前端类型"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="生成场景" field="scene">
            <a-select
              v-model="generateForm.scene"
              :options="[{ label: '用户App', value: 1 }]"
              placeholder="请选择生成场景"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="上级菜单" field="parentMenuId">
            <a-select
              v-model="generateForm.parentMenuId"
              :options="[]"
              placeholder="请选择上级菜单"
            />
          </a-form-item>
        </a-col>
        <!--TODO: 以上都要调整-->
        <a-col :span="12">
          <a-form-item label="模块名" field="moduleName">
            <a-input
              v-model="generateForm.moduleName"
              placeholder="请输入模块名"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="业务名" field="businessName">
            <a-input
              v-model="generateForm.businessName"
              placeholder="请输入业务名"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="类名称" field="className">
            <a-input
              v-model="generateForm.className"
              placeholder="请输入类名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="类描述" field="classComment">
            <a-input
              v-model="generateForm.classComment"
              placeholder="请输入类描述"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item>
            <a-space>
              <a-button @click="back">返回</a-button>
              <a-button type="primary" @click="validate">保存</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup lang="ts" name="GenerateInfoEdit">
  import { PropType, ref, watch } from 'vue';

  interface GenerateFormModel {
    templateType: number; // 生成模板
    frontType: number; // 前端类型
    scene: number; // 生成场景
    parentMenuId: string; // 上级菜单
    // 以上暂时不需要
    moduleName: string; // 模块名
    businessName: string; // 业务名
    className: string; // 类名称
    classComment: string; // 类描述
  }
  const props = defineProps({
    form: {
      type: Object as PropType<GenerateFormModel>,
      default: () => {
        // empty
      },
    },
  });
  const emits = defineEmits(['back', 'save']);

  const formRef = ref<any>();
  const grenerateFormModel = (initForm?: GenerateFormModel) => {
    return {
      templateType: initForm?.templateType || '',
      frontType: initForm?.frontType || '',
      scene: initForm?.scene || '',
      parentMenuId: initForm?.parentMenuId || '',
      moduleName: initForm?.moduleName || '',
      businessName: initForm?.businessName || '',
      className: initForm?.className || '',
      classComment: initForm?.classComment || '',
    };
  };
  const rules = {
    templateType: [{ required: true, message: '请选择生成模板' }],
    frontType: [{ required: true, message: '请选择前端类型' }],
    scene: [{ required: true, message: '请选择生成场景' }],
    // 上改
    moduleName: [{ required: true, message: '请输入模块名' }],
    businessName: [{ required: true, message: '请输入业务名' }],
    className: [{ required: true, message: '请输入类名称' }],
    classComment: [{ required: true, message: '请输入类描述' }],
  };
  const generateForm = ref(grenerateFormModel());
  const initForm = () => {
    generateForm.value = grenerateFormModel(props.form);
  };

  watch(
    () => props.form,
    () => {
      initForm();
    }
  );

  const back = () => {
    emits('back');
  };
  const validate = async () => {
    const errors = await formRef.value.validate();
    if (!errors) {
      emits('save', generateForm.value);
    }
  };
</script>
